<template>
  <div>
    <!-- 头部标签,专门放导航的 -->
    <div id="head">
      <router-link to></router-link>
      <button @click="toindex"> 点击跳转index</button>
      <button @click="tologin"> 点击跳转login</button>
      <button @click="$router.push('/index')"> 点击跳转index</button>
      <!-- 编程式的导航 用js 代码来进行页面跳转 -->
    </div>
    <router-view></router-view>
  </div>
</template>
<script setup >
// router 路由 url路径 和页面  进行关联起来

// 使用userRouter 获取到 路由器
import { useRouter } from 'vue-router';
// 调用方法,返回路由器
let router = useRouter()
let toindex = function () {
  // 字符串路径
  router.push('/index')
}
let tologin = function () {
  // 字符串路径
  router.push('/login/李四')
  console.log(router.getRoutes());
}

</script>

<style scoped>
.nav {
  color: #ccc;
  padding: 10px;
  text-decoration: none;
  transition: all 0.8s;
}

.nav:hover {
  color: aqua;
  border-bottom: 1px solid aqua;
}
</style>